<template>
	<section class="wrapper1" @keyup.enter="doLogin">
		<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
			<el-row>
				<el-col :span="4">
					<el-form-item label="投诉单号:">
						<el-input placeholder="投诉单号" v-model="filter.batchId" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="投诉时间:">
						<el-date-picker size="small" v-model="GmtCreate" type="datetimerange" :picker-options='pickerOptions1' start-placeholder="开始日期"
										end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="审核状态:">
						<el-select v-model="filter.batchStatusStr" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="审核中" value="审核中"></el-option>
							<el-option label="审核通过" value="审核通过"></el-option>
							<el-option label="审核不通过" value="审核不通过"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="知识产权类型:">
						<el-select v-model="filter.intellectualStr" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="商标权" value="商标权"></el-option>
							<el-option label="专利权" value="专利权"></el-option>
							<el-option label="著作权" value="著作权"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="品牌名称">
						<!--<el-input placeholder="品牌名称" v-model="filter.brandName" size="small"></el-input>-->
						<el-autocomplete v-model="filter.brandName" :fetch-suggestions="querySearch" placeholder="品牌名称" size="small" @select="handleSelect"></el-autocomplete>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="平台名称:">
						<el-select v-model="filter.entityPlatform" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="天猫" value="天猫"></el-option>
							<el-option label="淘宝" value="淘宝"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				

			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="屏蔽状态:">
						<el-select v-model="filter.appealFlag" size="small">
							<el-option label="全部" value=""></el-option>
							<el-option label="正常" value="1"></el-option>
							<el-option label="屏蔽" value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="投诉账号:">
						<el-input placeholder="投诉账号" v-model="filter.iprUserName" size="small"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24" class="action_col">
					<el-form-item class="action_button_group_open">
						<el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
						</el-button>
						<el-button size="small" type="primary" @click="getCustomers" icon="el-icon-search">查询</el-button>

					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span='24' class="hide_and_show">
					<el-form-item class="action_button_group_open">
						<el-button size="small" @click="shieldBox" :disabled="pingbi"><i class="el-icon-document"></i> 屏蔽
						</el-button>
						<el-button size="small" @click="noShield" :disabled="cancelpingbi"><i class="el-icon-check"></i> 撤销屏蔽</el-button>
						&nbsp;&nbsp;
						<a size="small" @click="exportTable()" class="export">
							<el-button size="small" icon="el-icon-zoom-in">导出</el-button>
						</a>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-table ref="multipleTable" :data="customerList" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" >
					<el-table-column type="selection" className="aaaa">
					</el-table-column>
					<el-table-column prop="batchId" label="投诉单号" min-width="140" align="center">
						<template scope="scope">
							<div class="customer_col" @click="linkA(scope)">
								<nuxt-link :to="paths">
									{{ scope.row.batchId}}
								</nuxt-link>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="appealCreate" label="投诉时间" align="center" min-width='180'>
					</el-table-column>
					<el-table-column prop="batchStatusStr" label="审核状态" align="center" min-width='110'>
					</el-table-column>
					<el-table-column prop="intellectualStr" label="知识产权类型" align="center" min-width='100'>
					</el-table-column>
					<el-table-column prop="brandName" label="品牌名称" align="center" min-width='110'>
					</el-table-column>
					<el-table-column prop="entityPlatform" label="平台" align="center" min-width='70'>
					</el-table-column>
					<el-table-column prop="saleMemberName" label="销售员" align="center" min-width='90'>
					</el-table-column>
					<el-table-column prop="dockMemberName" label="对接员" align="center" min-width='80'>
					</el-table-column>
					
					<el-table-column prop="appealFlagName" label="屏蔽状态" align="center" min-width='70'>
					</el-table-column>
					<el-table-column prop="iprUserName" label="投诉账号" align="center" min-width='100'>
					</el-table-column>
					<el-table-column prop="gmtModify" label="最近一次抓取时间" align="center" min-width='180'>
					</el-table-column>
				</el-table>

			</el-row>
			<el-row class="paging">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="pagingData.pageNum" :page-sizes="pagingData.pageSizes" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="pagingData.total">
				</el-pagination>
			</el-row>
			
			<!--导出的表格-->
			
			<el-row class="margin-table1">
				<el-table ref="multipleTable" :data="tableDataCheck" border id="table01">
					<el-table-column type="selection" className="aaaa">
					</el-table-column>
					<el-table-column prop="batchId" label="投诉单号" min-width="140" align="center">
						<template scope="scope">
							<div class="customer_col" @click="linkA(scope)">
								<nuxt-link :to="paths">
									{{ scope.row.batchId}}
								</nuxt-link>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="appealCreate" label="投诉时间" align="center" min-width='180'>
					</el-table-column>
					<el-table-column prop="intellectualStr" label="知识产权类型" align="center" min-width='100'>
					</el-table-column>
					<el-table-column prop="brandName" label="品牌名称" align="center" min-width='110'>
					</el-table-column>
					<el-table-column prop="entityPlatform" label="平台" align="center" min-width='70'>
					</el-table-column>
					<el-table-column prop="saleMemberName" label="销售员" align="center" min-width='90'>
					</el-table-column>
					<el-table-column prop="dockMemberName" label="对接员" align="center" min-width='80'>
					</el-table-column>
					<el-table-column prop="batchStatusStr" label="审核状态" align="center" min-width='110'>
					</el-table-column>
					<el-table-column prop="appealFlagName" label="屏蔽状态" align="center" min-width='70'>
					</el-table-column>
					<el-table-column prop="iprUserName" label="投诉账号" align="center" min-width='100'>
					</el-table-column>
					<el-table-column prop="gmtModify" label="最近一次抓取时间" align="center" min-width='180'>
					</el-table-column>
				</el-table>

			</el-row>

			
			
			
			
		</el-form>

	</section>
</template>

<script>
	import Vue from 'vue'
	import { mapGetters } from 'vuex'
	import {
		Row,
		Col,
		Form,
		FormItem,
		Button,
		Select,
		Option,
		DatePicker,
		Table,
		Pagination,
		TableColumn,
		Input,
		Tabs,
		TabPane,
		Message,
		MessageBox,
		Autocomplete
	} from 'element-ui';
	import { getDate, getArraySub, getLevelName, validTel, setToken, getCookie } from '../../utils/auth';
	import { SHOW_MESSAGE, MESSAGE_IDS, MESSAGE_NAMES, MESSAGE_TELS } from '../../store/mutation-types/template/index';

	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Button);
	Vue.use(Select);
	Vue.use(Input);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Table);
	Vue.use(Tabs);
	Vue.use(TabPane);
	Vue.use(TableColumn);
	Vue.use(Pagination);
	Vue.use(Autocomplete);

	Vue.prototype.$message = Message;
	Vue.prototype.$confirm = MessageBox.confirm;
	export default {
		head() {
			return {
				title: "产权投诉",
			}
		},
		data() {
			return {
				
				tabName: '产权投诉进度列表',
				filter: {
					iprUserName:'',//投诉账号
					batchId: '', //投诉单号
					intellectualStr: '', //知识产权类型
					brandName: '', //品牌名称
					entityPlatform: '', //平台名称
					batchStatusStr: '', //审核状态
					appealFlag: '', //投诉状态
					appealDateBegin: '', //创建时间开始
					appealDateEnd: '', //创建时间结束
					pageNum: 1, //页码
					pageSize: 50,
				},
				GmtCreate: [], //创建时间
				customerList: [], //投诉单号列表
				brandList: [], //当前登录人的列表
				pagingData: {
					pageSizes: [10, 20, 50, 1000], // 每页可选条数列表,
					total: 0,
					pageNum: 1
				},
				multipleSelection: [], // checkbox选中客户列表数据客户id
				mapAppealFlags: [], //chaeckbox选中列表数据的屏蔽状态
				tableDataCheck:[],
				pingbi: false, //屏蔽按钮的禁用与否
				cancelpingbi: false, //撤销屏蔽按钮的禁用与否
				brr: [], //根据brr数组长度  对比       判断屏蔽   撤销屏蔽按钮的禁用与否
				paths: {},
				pickerOptions1: { //创建时间只能选择今天之前的
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
			}
		},
		computed: {
			...mapGetters([
				"mycomplaint",
			])
		},

		methods: {
			doLogin(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode == 13) { // enter 键
					//要做的事情
					this.getCustomers();
				}
			},

			setFilterCookie() {
				let datas = JSON.stringify(this.filter);
				this.$store.commit('MY_COMPLAINT', {
					data: datas
				});
			},

			linkA(scope) {
				if(scope.row.batchStatusStr == "审核不通过") {
					this.$router.push({
						//						path: '/complaintlist/auditfail',
						path: '/complaintlist/audited',
						query: {
							id: scope.row.id,
							numbers: scope.row.batchId
						}
					});

				} else if(scope.row.batchStatusStr == "审核中") {
					this.$router.push({
						//						path: '/complaintlist/inaudit',
						path: '/complaintlist/audited',
						query: {
							id: scope.row.id,
							numbers: scope.row.batchId
						}
					});

				} else {
					this.$router.push({
						path: '/complaintlist/audited',
						query: {
							id: scope.row.id,
							numbers: scope.row.batchId
						}
					});
				}
			},
			//清空筛选条件
			empty() {
				let pageSize = this.filter.pageSize;
				let pageNum = this.filter.pageNum;
				this.filter = {
					iprUserName:'',//投诉账号
					batchId: '', //投诉单号
					intellectualStr: '', //知识产权类型
					brandName: '', //品牌名称
					entityPlatform: '', //平台名称
					batchStatusStr: '', //审核状态
					appealFlag: '', //投诉状态
					complaintDate: '', //投诉时间
					appealDateBegin: '', //创建时间开始
					appealDateEnd: '', //创建时间结束
					pageSize: pageSize, // 每页条数
					pageNum: pageNum,
				};
				this.GmtCreate = []; //创建时间
				this.setFilterCookie();
			},
			//获取投诉列表
			getCustomers() {
				if(this.GmtCreate && this.GmtCreate[0]) {
					this.filter.appealDateBegin = this.GmtCreate[0] ? getDate(this.GmtCreate[0], true) : '';
					this.filter.appealDateEnd = this.GmtCreate[1] ? getDate(this.GmtCreate[1], true) : '';
				} else {
					this.filter.appealDateBegin = ''
					this.filter.appealDateEnd = ''
				}
				this.setFilterCookie();
				this.$store.dispatch('getAppealProcessList', this.filter)
					.then((response) => {
						if(!response) {
							return
						}
						let result = response.data;
						if(result.successed = true && result.data.list) {
							this.customerList = result.data.list;
							this.pagingData.total = result.data.total;
							this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
						} else if(result.data == null) {
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						} else {
							this.customerList = [];
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						}
					})

			},
			//表格的全选和单选
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.tableDataCheck=val;
				if(this.tableDataCheck.length==0){
    	    		document.getElementsByClassName("export")[0].removeAttribute('href');
    	    	}
				let ids = [];
				let appealFlag = [];
				for(let i = 0; i < val.length; i++) {
					ids.push(val[i].id);
					appealFlag.push(val[i].appealFlag);
				}
				this.multipleSelection = ids;
				this.mapAppealFlags = appealFlag;
				var arr = this.mapAppealFlags;
				this.brr = Array.from(new Set(arr));
				if(this.brr.length == 1) {
					for(let i = 0; i < this.brr.length; i++) {
						if(this.brr[i] == 1) {
							this.cancelpingbi = true;
							this.pingbi = false;
						} else {
							this.cancelpingbi = false;
							this.pingbi = true;
						}
					}
				} else if(arr.length == 0) {
					this.cancelpingbi = false;
					this.pingbi = false;
				}
			},
			//屏蔽
			shieldBox() {
				if(this.multipleSelection == '') {
					this.$message.error('请先选择品牌');
					return;
				} else {
					if(this.brr.length !== 1) {
						Message.error({
							message: '请选择相同投诉状态操作'
						});
					} else {
						this.$confirm('确定屏蔽所选投诉吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var arrids = this.multipleSelection;
							var canshu = arrids.join(",");
							this.$store.dispatch('shieldAppealprocessing', {
									appealIds: canshu,
									type: 2
								})
								.then((response) => {
									let result = response.data;
									if(result.successed == true) {
										this.getCustomers({
											pageNum: 1,
											pageSize: 50
										});
										Message.success({
											message: '屏蔽成功'
										});
									} else {
										Message.error({
											message: '屏蔽~失败'
										})
									}
								})
						}).catch(() => {
							//							this.$message({
							//								type: 'info',
							//								message: '已取消屏蔽'
							//							});
						});
					}
				}
			},
			//撤销屏蔽
			noShield() {
				if(this.multipleSelection == '') {
					this.$message.error('请先选择品牌');
					return;
				} else {
					if(this.brr.length !== 1) {
						Message.error({
							message: '请选择相同投诉状态操作'
						});
					} else {
						this.$confirm('确定撤销屏蔽吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							var arrids = this.multipleSelection;
							var canshu = arrids.join(",");
							this.$store.dispatch('shieldAppealprocessing', {
									appealIds: canshu,
									type: 1
								})
								.then((response) => {
									let result = response.data;
									if(result.successed == true) {
										this.getCustomers({
											pageNum: 1,
											pageSize: 50
										});
										Message.success({
											message: '撤销屏蔽成功'
										});
									} else {
										Message.error({
											message: '撤销屏蔽~失败'
										})
									}
								})
						}).catch(() => {
							//							this.$message({
							//								type: 'info',
							//								message: '已取消屏蔽'
							//							});
						});
					}
				}
			},
			handleCurrentChange(val) {
				this.filter.pageNum = val;
				this.tableDataCheck=[];
				this.getCustomers(this.filter);
			},
			handleSizeChange(val) {
				this.filter.pageSize = val;
				this.filter.pageNum = 1;
				this.getCustomers(this.filter);
			},

			//品牌名称的 模糊搜索用到
			getBrandList(val) {
				this.$store.dispatch('getSelfBrandsList').then((res) => {
					if(res) {
						this.brandList = res.data.data;
						this.brandList.map(list => {
							Vue.set(list, 'value', list.brandName)
						})
					}
				})
			},
			//品牌名称的模糊搜索
			querySearch(queryString, cb) {
				let restaurants = this.brandList;
				let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				clearTimeout(this.timeout);
				this.timeout = setTimeout(() => {
					cb(results);
				}, 500 * Math.random());
			},
			//品牌名称的模糊搜索
			createFilter(queryString) {
				return(state) => {
					return(state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			//品牌名称的模糊搜索
			handleSelect(item) {
				//				console.log(item)
				this.filter.brandName = item.brandName;
			},
			exportTable() { //将表格内容导出到excel中
				if(this.tableDataCheck.length==0){
					this.$message({type: 'error',message: '请先选择要导出的投诉进度信息'});
					return false;
				}else{
					let html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById('table01').outerHTML + "</body></html>";
					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
					let blob = new Blob([html], {
						type: "application/vnd.ms-excel"
					});
					let a = document.getElementsByClassName("export")[0];
					// 利用URL.createObjectURL()方法为a元素生成blob URL
					a.href = URL.createObjectURL(blob);
					// 设置文件名，目前只有Chrome和FireFox支持此属性
					a.download = "产权投诉进度列表.xls";

				}

			},
		},

		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList'
			})
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
				if(this.pageTabsList[this.pageTabsList.length - 1].name == 'CRM') {
					let arr = this.pageTabsList;
					arr[arr.length - 1].name = this.tabName;
					this.$store.commit('PAGETABSLIST', {
						data: arr
					})
				}
			}
			this.getBrandList();
		},
		mounted() {
			let filter = this.$store.getters.mycomplaint;

			if(filter) this.filter = JSON.parse(filter);

			if(this.filter.appealDateBegin) {
				this.GmtCreate = [new Date(this.filter.appealDateBegin), new Date(this.filter.appealDateEnd)]
			}

			this.getCustomers();
		},
	}
</script>

<style lang="scss">
	.wrapper1 {
		.paging {
			margin-top: 20px;
		}
		.el-table th>.cell {
			padding: 0;
		}
		.el-table th:nth-of-type(1) {
			padding-left: 18px;
		}
		.margin-table1{z-index: 0 !important;opacity: 0;height:0 !important;overflow: hidden;}
		.el-form {
			.el-form-item {
				width: 70%;
				.el-date-editor--datetimerange.el-input {
					width: auto;
				}
				.el-date-editor.el-input {
					width: auto;
				}
			}
		}
	}
</style>